<template>
	<view class="apply">
		<view class="user-form">
			<view class="title">个人信息</view>
			<view class="form-item flex align-center">
				<view class="item-left">姓名</view>
				<input type="text" v-model="requestData.realname" placeholder="请输入你的名字" placeholder-class="input-css">
			</view>
			<picker mode="date" @change="birthdayChange">
				<view class="form-item flex align-center">
					<view class="item-left">生日</view>
					<input type="text" v-model="requestData.birthday" disabled="disabled" placeholder="请选择生日（选填）"
						placeholder-class="input-css">
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
			<picker :range="labelList" range-key="title" @change="labelChange">
				<view class="form-item flex align-center">
					<view class="item-left">标签</view>
					<input v-if="!choiceLabel.title" type="text" disabled="disabled" v-model="choiceLabel.title" placeholder="请选择标签" placeholder-class="input-css">
					<view style="flex: 1;display: flex;" v-else>
						<view class="label-css">{{choiceLabel.title}}</view>
					</view>
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
			<view class="form-item flex align-center">
				<view class="item-left">电话</view>
				<input type="number" v-model="requestData.mobile" placeholder="请输入电话" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">微信号</view>
				<input type="text" v-model="requestData.wechat" placeholder="请输入微信号" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">星座</view>
				<input type="text" v-model="requestData.constellation" placeholder="请填写星座（选填）"
					placeholder-class="input-css">
			</view>
			<!-- <picker :range="cityList" range-key="name" @change="cityPicker"> -->
				<view class="form-item flex align-center">
					<view class="item-left">城市</view>
					<input v-if="!choiceCity.name" type="text" disabled="disabled" placeholder="选择城市" placeholder-class="input-css">
					<view v-else style="flex: 1;">
						<view>{{choiceCity.name}}</view>
					</view>
					<view class="compontent_c">
						<cityP @choiceCity='choiceCompontent'></cityP>
					</view>
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			<!-- </picker> -->
			<picker :range="schoolList" range-key="title" @change="schoolPicker">
				<view class="form-item flex align-center">
					<view class="item-left">学校</view>
					<input v-if="!choiceSchool.title" type="text" disabled="disabled" placeholder="请选择学校" placeholder-class="input-css">
					<view v-else style="flex: 1;">
						<view>{{choiceSchool.title}}</view>
					</view>
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
			<view class="form-item flex align-center">
				<view class="item-left">专业</view>
				<input type="text" v-model="requestData.major" placeholder="请输入专业名称（选填)" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">自我介绍</view>
				<input type="text" v-model="requestData.intro" placeholder="请输入内容，让大家了解你" placeholder-class="input-css">
			</view>
			<view class="form-item flex ">
				<view class="item-left">上传照片（选填）</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="1"></u-upload>
			</view>
		</view>
		<view class="user-form" style="margin-top: 20rpx;">
			<view class="title">室友要求</view>
			<picker @change="sexPicker" :range="sexList" range-key="title">
				<view class="form-item flex align-center" style="justify-content: space-between;">
					<view class="item-left">性别</view>
					<view class="flex align-center">
						<view style="color: #262626;font-size: 26rpx;padding-right: 16rpx;">{{sexData.title}}</view>
						<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;">
						</image>
					</view>
				</view>
			</picker>
		</view>
		<view class="user-form" style="margin-top: 20rpx;padding-bottom: 20rpx;">
			<view class="title" style="margin-bottom: 20rpx;">拼房信息</view>
			<view class="form-item flex align-center" style="justify-content: space-between;">
				<view class="item-left">是否订房</view>
				<view class="flex align-center">
					<view class="flex">
						<view style="display: flex;align-items: center;" @tap="requestData.is_booking = 1">
							<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
								v-if="requestData.is_booking === 1 ? true : false"></image>
							<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;" v-else>
							</image>
							<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">是</view>
						</view>
						<view style="display: flex;align-items: center;margin-left: 80rpx;"
							@tap="requestData.is_booking = 0">
							<image src="../../static/index/check-true.png" style="width: 28rpx;height: 28rpx;"
								v-if="requestData.is_booking === 0 ? true : false"></image>
							<image src="../../static/index/check-false.png" style="width: 28rpx;height: 28rpx;" v-else>
							</image>
							<view style="color: #464646;font-size: 28rpx;padding-left: 14rpx;">否</view>
						</view>
					</view>
				</view>
			</view>
			<block v-if="requestData.is_booking == 1">
				<picker :range="apartmentList" range-key="title"  @change="apartmentPicker">
					<view class="form-item flex align-center" style="justify-content: space-between;">
						<view class="item-left">请选择公寓</view>
						<view class="flex align-center">
							<view style="color: #262626;font-size: 26rpx;padding-right: 16rpx;">{{apartmentData.title}}</view>
							<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
				</picker>
				<picker :range="roomList" range-key="title" @change="roomPicker">
					<view class="form-item flex align-center" style="justify-content: space-between;">
						<view class="item-left">请选择房间</view>
						<view class="flex align-center">
							<view style="color: #262626;font-size: 26rpx;padding-right: 16rpx;">{{roomData.title}}</view>
							<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
				</picker>
				<picker :range="personList" @change="persoPicker">
					<view class="form-item flex align-center" style="justify-content: space-between;">
						<view class="item-left">拼室友人数</view>
						<view class="flex align-center">
							<view style="color: #262626;font-size: 26rpx;padding-right: 16rpx;">{{requestData.group_person}}人</view>
							<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
				</picker>
				<view style="color: #202020;font-size: 28rpx;font-weight: 400;padding: 30rpx 0;">描述</view>
				<view class="textarea">
					<textarea name="" id="" cols="10" v-model="requestData.desc" rows="10" placeholder="可输入内容"
						placeholder-class="input-css"></textarea>
				</view>
			</block>
			<block v-else>
				<picker :range="personList" @change="persoPicker">
					<view class="form-item flex align-center" style="justify-content: space-between;">
						<view class="item-left">拼室友人数</view>
						<view class="flex align-center">
							<view style="color: #262626;font-size: 26rpx;padding-right: 16rpx;">{{requestData.group_person}}人</view>
							<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
						</view>
					</view>
				</picker>
				<view class="form-item flex align-center" style="justify-content: space-between;border: none;" @tap="toChoiceApartment">
					<view class="item-left">意向公寓</view>
					<view class="flex align-center">
						<view style="color: #8D8D8D;font-size: 26rpx;padding-right: 16rpx;">请选择 （最多3项）</view>
						<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;">
						</image>
					</view>
				</view>
				
				<view style="padding: 0 20rpx;background: #F9F9F9;border-radius: 8px;">
					<view class="flex align-center" style="padding: 20rpx 0;border-bottom: 1px solid #EFEFEF;" v-for="(item,index) in choiceApartment" :key="index">
						<view class="flex" style="flex: 1;">
							<image :src="item.thumb"
								style="width: 166rpx;height: 106rpx;border-radius: 4px;"></image>
							<view style="padding-left: 20rpx;">
								<view class="text-one" style="color: #141414;font-size: 24rpx;font-weight: bold;line-height: 24rpx;width: 340rpx;">{{item.title}}</view>
								<view class="flex align-center" style="padding: 6rpx 0 15rpx 0;">
									<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
									<text class="text-one" style="color: #ABABAB;font-size: 20rpx;width: 340rpx;">{{item.address}}</text>
								</view>
								<view class="flex align-end">
									<text class="font-20 fw5" style="color: #C40E0E;">£</text>
									<text class="font-28 fw5"
										style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
									<text class="font-20 fw4 cl-88">起 /周</text>
								</view>
							</view>
						</view>
						<image src="../../static/index/close.png" style="width: 36rpx;height: 36rpx;" @tap="delApartment(index)"></image>
					</view>
				</view>
			</block>

		</view>
		<view style="height: 300rpx;"></view>
		<view class="button">
			<view class="flex align-center justify-center py-2">
				<view class="checked" @click="this.dealShow = !this.dealShow">
					<image :src="dealShow?'/static/common/active.png':'/static/common/unchecked.png'" mode=""></image>
				</view>
				<view class="font-28 cl-44">
					<text @click="this.dealShow = !this.dealShow">阅读并同意</text>
					<text @click="jump({url:'/pages/fwxy/fwxy'})" style="color: #ffb24b;">《服务协议》</text>及
					<text @click="jump({url:'/pages/yszc/yszc'})" style="color: #ffb24b;">《隐私政策》</text>
					</view>
			</view>
			<view class="butxt" @tap="submit">提交</view>
		</view>
		<!-- 生日 -->
		<u-datetime-picker closeOnClickOverlay="true" :show="birthdayShow" v-model="value1" mode="date"
			@cancel="birthdayShow = false" @close="birthdayShow = false" @confirm="confirmrelationship">
		</u-datetime-picker>
	</view>
</template>

<script>
	import cityP from "@/components/city.vue"
	export default {
		components: {
			cityP
		},
		data() {
			return {
				dealShow:true,
				birthdayShow: false,
				value1: Number(new Date()),
				array: ['父亲', '母亲'],
				requestData: {
					realname: '',
					birthday: '',
					label_id: '', //标签id,
					mobile: '',
					wechat: '',
					constellation: '', //星座
					city_id: '', //城市id
					school_id: '', //学校id
					major: '', //专业
					intro: '', //自我介绍
					photo:'',//图片
					gender_require:0,//性别
					is_booking:1,//是否已订房
					apartment_id:'',//公寓id
					room_id:'',//房间id
					group_person:'1',//人数
					desc:'',//备注
					want_apartment_ids:'',//意向公寓id
				},
				labelList:[],//标签列表
				choiceLabel:{id:null, title: ""},
				cityList:[],//城市列表
				choiceCity:{id:null, name: ""},
				schoolList:[{title:'请先选择城市'}],//学校列表
				choiceSchool:{},
				fileList1:[],
				sexList:[{id:0,title:'男女不限'},{id:1,title:'男'},{id:2,title:'女'}],
				sexData:{id:0,title:'男女不限'},
				apartmentList:[{title:'请先选择城市'}],//公寓列表
				apartmentData:{title:'请选择公寓'},
				roomList:[{title:'请先选择公寓'}],
				roomData:{title:'请选择房间'},
				personList:[1,2,3,4],
				choiceApartment:[],//意向列表
			}
		},
		onLoad() {
			//标签
			this.$H.get(this.$api.get_label,{},{token:true}).then(res=>{this.labelList = res.data})
			//城市
			this.$H.get(this.$api.get_city_list,{},{token:false}).then(res=>{this.cityList = res.data})
			uni.$on('choiceApa', (data) => {
				this.choiceApartment = data.list
				// console.log('选择公寓的监听' + data.list);
			})
		},
		methods: {
			//提交
			submit(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(!this.requestData.realname) return this.msg('请填写姓名')
				if(!this.requestData.birthday) return this.msg('请选择生日')
				if(!this.requestData.label_id) return this.msg('请选择标签')
				if(!this.requestData.mobile) return this.msg('请填写电话')
				if(!reg.test(this.requestData.mobile)) return this.msg('请输入正确的手机号')
				if(!this.requestData.wechat) return this.msg('请填写微信号')
				// if(!this.requestData.constellation) return this.msg('请填星座')
				if(!this.requestData.city_id) return this.msg('请选择城市')
				if(!this.requestData.school_id) return this.msg('请选择学校')
				// if(!this.requestData.major) return this.msg('请填写专业')
				if(!this.requestData.intro) return this.msg('请填写自我介绍')
				// if(!this.requestData.photo) return this.msg('请上传图片')
				if(!this.requestData.apartment_id && this.requestData.is_booking == 1 ) return this.msg('请选择预定公寓')
				if(!this.requestData.room_id && this.requestData.is_booking == 1 ) return this.msg('请选择房间')
				if(!this.choiceApartment.length && this.requestData.is_booking == 0 ) return this.msg('请选择意向公寓')
				console.log(this.requestData)
				if(this.requestData.is_booking){
					this.requestData.want_apartment_ids = ''
				}else{
					const ids = this.choiceApartment.map(item => {return item.id})
					this.requestData.want_apartment_ids = ids.join(',')
				}
				
				if(!this.dealShow) return this.msg('请阅读并同意《服务协议》及《隐私政策》')
				
				uni.showLoading({
					title: '加载中',
					mask:true
				});
				//提交抢房
				this.$H.post(this.$api.create_group,{...this.requestData},{token:true}).then(res=>{
					uni.hideLoading();
					if(res.code == 1){
						// this.msg('提交成功')
						
						uni.showModal({
							title:'友情提示',
							content:'你的申请已提交，请等待米欧客服联系您',
							showCancel:false,
							success: resp =>{
								if(resp.confirm){
									uni.navigateTo({
										url:`/pages/qsuccess/qsuccess?id=${res.data.id}`
									})
								}
							}
						})
						// setTimeout(()=>{
						// 	uni.navigateBack()
						// 	uni.navigateTo({
						// 		url:`/pages/qsuccess/qsuccess?id=${res.data.id}`
						// 	})
						// },600)
					}else{
						this.msg(res.msg)
					}
					
				})
				
			},
			//删除
			delApartment(index){
				this.choiceApartment.splice(index,1)
			},
			//选择意向公寓
			toChoiceApartment(){
				if(this.requestData.city_id){
					this.jump({url:`/pages/index/choiceApartment?cityId=${this.requestData.city_id}&apartment=${JSON.stringify(this.choiceApartment)}`})
				}else{
					return this.msg('请先选择城市')
				}
			},
			//性别
			sexPicker(e){
				console.log(e)
				this.sexData = this.sexList[e.detail.value]
				this.requestData.gender_require = this.sexList[e.detail.value].id
			},
			//删除
			deletePic(){
				this.fileList1 = []
				this.requestData.photo = ''
			},
			//上传
			afterRead(e){
				console.log(e)
				const token = uni.getStorageSync('userInfo').token
				uni.uploadFile({
					url: 'https://app.ukmioliving.com/api/common/qupload', //仅为示例，非真实的接口地址
					filePath: e.file[0].url,
					name: 'file',
					header: {
						'token': token
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data).data.fullurl);
						this.requestData.photo = JSON.parse(uploadFileRes.data).data.fullurl
						this.fileList1 = [{url:JSON.parse(uploadFileRes.data).data.fullurl}]
					}
				});
				// this.$H.post(this.$api.qupload,{file:e.file[0].url},{token:false}).then(res=>{console.log(res)})
			},
			//选择人数
			persoPicker(e){
				this.requestData.group_person = this.personList[e.detail.value]
			},
			//选择学校
			schoolPicker(e){
				if(!this.requestData.city_id) return
				this.choiceSchool = this.schoolList[e.detail.value]
				this.requestData.school_id = this.schoolList[e.detail.value].id
			},
			//选择房间
			roomPicker(e){
				if(!this.requestData.apartment_id) return
				this.roomData = this.roomList[e.detail.value]
				this.requestData.room_id = this.roomList[e.detail.value].id
			},
			//选择公寓
			apartmentPicker(e){
				if(!this.requestData.city_id) return
				//清空房间
				this.roomData = {title:'请选择房间'}
				this.requestData.room_id = ''
				
				this.apartmentData = this.apartmentList[e.detail.value]
				this.requestData.apartment_id = this.apartmentList[e.detail.value].id
				//房间列表
				this.$H.post(this.$api.get_room_by_apartment,{id:this.requestData.apartment_id},{token:false}).then(res=>{this.roomList = res.data})
			},
			choiceCompontent(e){
				//清空学校
				this.choiceSchool = {}
				this.requestData.school_id = ''
				//清空公寓
				this.apartmentData = {title:'请选择公寓'}
				this.requestData.apartment_id = ''
				//清空房间
				this.roomData = {title:'请选择房间'}
				this.requestData.room_id = ''
				//清空意向房间
				this.choiceApartment = []
				
				this.choiceCity = e
				this.requestData.city_id = e.id
				//根据城市筛选学校
				this.$H.post(this.$api.get_school_by_city,{city_id:this.requestData.city_id},{token:false}).then(res=>{this.schoolList = res.data})
				//公寓列表
				this.$H.post(this.$api.get_list_by_city,{city_id:this.requestData.city_id},{token:false}).then(res=>{this.apartmentList = res.data})
			},
			//选择城市
			cityPicker(e){
				//清空学校
				this.choiceSchool = {}
				this.requestData.school_id = ''
				//清空公寓
				this.apartmentData = {title:'请选择公寓'}
				this.requestData.apartment_id = ''
				//清空房间
				this.roomData = {title:'请选择房间'}
				this.requestData.room_id = ''
				//清空意向房间
				this.choiceApartment = []
				
				this.choiceCity = this.cityList[e.detail.value]
				this.requestData.city_id = this.cityList[e.detail.value].id
				//根据城市筛选学校
				this.$H.post(this.$api.get_school_by_city,{city_id:this.requestData.city_id},{token:false}).then(res=>{this.schoolList = res.data})
				//公寓列表
				this.$H.post(this.$api.get_list_by_city,{city_id:this.requestData.city_id},{token:false}).then(res=>{this.apartmentList = res.data})
			},
			//标签选择
			labelChange(e){
				this.choiceLabel = this.labelList[e.detail.value]
				this.requestData.label_id = this.labelList[e.detail.value].id
			},
			//生日选择
			birthdayChange(e) {
				this.requestData.birthday = e.detail.value
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.apply {
		.title {
			padding: 40rpx 0 10rpx 0;
			position: relative;
			font-size: 34rpx;
			font-weight: bold;
			color: #202020;

			&.title:before {
				content: '';
				position: absolute;
				bottom: 10rpx;
				left: 4rpx;
				width: 132rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0) 100%);
			}
		}

		.user-form {
			padding: 0 30rpx;
			background-color: #fff;

			.form-item {
				position: relative;
				border-bottom: 1px solid #F6F6F6;
				padding: 40rpx 0;

				.item-left {
					width: 260rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #202020;
					line-height: 28rpx;
				}

				input {
					flex: 1;
				}

				.input-css {
					font-size: 28rpx;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}
				
				.label-css{
					padding: 10rpx;
					background: #FFECD2;
					border-radius: 10px 4px 9px 5px;
					font-size: 20rpx;
					font-weight: 400;
					color: #E99320;
				}
			}
			.compontent_c{
				position: absolute;
				z-index: 2;
				left: 0;
				right: 0;
				opacity: 0;
			}

			.textarea {
				padding: 30rpx 40rpx 0 40rpx;
				background: #F5F8FB;
				border-radius: 10px;

				.input-css {
					font-size: 28rpx;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}

				textarea {
					width: 100%;
				}
			}
		}

		.user-form>view:last-child {
			border: none;
		}

		.button {
			z-index: 1000;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx 35rpx 30rpx;
			background-color: #fff;
			.checked{
				width: 36rpx;
				height: 36rpx;
				margin-right: 24rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.butxt {
				text-align: center;
				padding: 24rpx 0;
				background: #FFB24B;
				border-radius: 34px 34px 34px 34px;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
